<template>
    <div class="layout">
        <header class="layout-header">
            <el-row>
                <el-col :span="4">
                        <h3>飞鸟旅游管理系统</h3>
                </el-col>
                <el-col :span="4" :offset="16">
                    <div class="box">
                        <div class="link" v-if="!isLogin">
                            <router-link to="/login">
                                <el-icon><Connection /></el-icon>
                                <span>登录</span>
                            </router-link>
                        </div>
                        <div class="user" v-else>
                            <router-link to="/admin">
                                <el-icon><User /></el-icon>
                                <span>{{ nickName }}</span>
                            </router-link> | <button @click="logoutFn">退出</button>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </header>
        <main>
            <el-row>
                <el-col :span="4">
                    <aside>
                        <!-- 侧栏菜单 -->
                        <my-menu></my-menu>
                    </aside>
                </el-col>
                <el-col :span="20">
                    <section>
                        <top-bar></top-bar>
                        <!-- 二级路由出口 -->
                        <router-view></router-view>
                    </section>
                </el-col>
            </el-row>
        </main>


         <!-- 对话框 -->
         <el-dialog v-model="dialogVisible" title="提示" width="500" draggable>
            <span>您要退出账号吗?</span>
            <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="comfirFn">
                确定
                </el-button>
            </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    import { useRouter } from 'vue-router'
    import MyMenu from './components/MyMenu.vue'
    import TopBar from './components/TopBar.vue'
    let token = localStorage.getItem("TOKEN");
    let nickName:any = ref("");
    let isLogin = ref(false);
    let dialogVisible = ref(false);
    const $router = useRouter();
    let topColor:any = ref('');
    let leftColor:any = ref('');
    let rightColor:any = ref('');
    topColor.value = localStorage.getItem("topColor");
    leftColor.value = localStorage.getItem("leftColor");
    rightColor.value = localStorage.getItem("rightColor");
    
    if(topColor.value == null){
         topColor.value = "#5b89fe"
    }

    if(leftColor.value == ''){
         leftColor.value = "#ccc"
    }

    if(rightColor.value == ''){
         rightColor.value = "#f0f0f0"
    }
    // console.log(111,topColor.value)
    if(token){
        isLogin.value = true;
        nickName.value = localStorage.getItem("NICK_NAME");
    }
    const logoutFn = ()=>{
        dialogVisible.value = true;
    }
    const comfirFn = ()=> {
    // 布尔值设置为false
    isLogin.value = false;
    // 移除token
    localStorage.removeItem("TOKEN");
    localStorage.removeItem("NICK_NAME");
    // 隐藏对话框
    dialogVisible.value = false
    // 延迟跳转登录页
    $router.replace({
        path: '/login'
    })

    
}
</script>

<style lang="scss">
@import './common/scss/variable.scss';
$min-height: 800px;

.layout {
    width: 100%;
    min-width: 1200px;
    margin: 0 auto;
    .layout-header {
        width: 100%;
        padding: 20px 20px;
        background-color: $bgColor;
        .box{
            text-align: right;
            button{
                background-color: transparent;
                font-size: 16px;
                cursor: pointer;
            }
            .el-icon,
            span{
                vertical-align: middle;
            }
            .el-icon{
                margin-right: 5px;
            }
        }
    }

    main {
        width: 100%;
        aside {
            min-height: $min-height;
            background-color: #ccc;
            padding: 15px 20px;
        }

        section {
            min-height: $min-height;
            background-color: #f0f0f0;
            padding: 15px 20px;
        }
    }

}


</style>